<template>
    <div class="expressinfo">
        <div class="title">
            <div>{{title}}</div>
            <div>更多>></div>
        </div>
        <div class="conent">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr class="head" ref="head">
                    <th>托运单位</th>
                    <th>状态</th>
                    <th>货物类型</th>
                    <th style="width: 70px">货物明细</th>
                </tr>
                <tr class="row" v-for="(item,index) in datas" :class="{'dom':index%2!=0}">
                    <td>{{item.consignCompanyName}}</td>
                    <td class="status">
                        <div>运</div>
                        <div>输</div>
                        <div>中</div>
                    </td>
                    <td>{{item.militarySecretLv}}</td>
                    <td>查看详情</td>
                </tr>


            </table>
        </div>
        <div class='left'>
            <img src="../../assets/images/left.png" alt="">
        </div>
        <div class='left-down'>
            <img src="../../assets/images/left_down.png" alt="">
        </div>
        <div class='right'>
            <img src="../../assets/images/right.png" alt="">
        </div>
        <div class='right-down'>
            <img src="../../assets/images/right_down.png" alt="">
        </div>
    </div>
</template>

<script>
    export default {
        props: ['title', 'datas'],
        name: "expressinfo",
        data() {
            return {}
        },
        mounted() {
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
    .expressinfo {
        height: 254px;
        margin-top: 20px;
        box-sizing: border-box;
        border: 1px solid #1B4B98;
        -webkit-box-shadow: inset 0 0 10px #1B4B98;
        -moz-box-shadow: inset 0 0 10px #1B4B98;
        box-shadow: inset 0 0 10px #1B4B98;
        position: relative;
        .title {
            height: 50px;
            line-height: 50px;
            background: #0A193B;
            padding: 0 10px;
            color: #6082A7;
            box-shadow: inset 6px 0 10px -5px rgba(27, 75, 152, .6), inset -6px 0 10px -5px rgba(27, 75, 152, .6);
            div {
                font-size: 14px;
                float: left;
            }
            .tit-btn {
                position: relative;
                height: 30px;
                line-height: 30px;
                padding: 0 8px;
                margin-top: 5px;
                color: #00c0ff;
                border: 1px solid #1B4B98;
                cursor: pointer;
                .left {
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                }
                .left-down {
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    bottom: 0px;
                    left: 0px;
                }
                .right-down {
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    bottom: 0px;
                    right: 0px;
                }
                .right {
                    width: 9px;
                    height: 9px;
                    position: absolute;
                    top: 0px;
                    right: 0px;
                }
            }
            div:last-child {
                float: right;
            }
        }
        .conent {
            position: relative;
            table {
                width: 100%;
                background: red;
                .head {
                    th {
                        color: #6284A9;
                        background: #0A0919;
                        padding: 0 10px;
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                    }
                }
                .row {
                    border: none;
                    td {
                        color: #6284A9;
                        background: #091737;
                        padding: 0 10px;
                        height: 40px;
                        line-height: 40px;
                        text-align: left;
                    }
                    .status {
                        div {
                            float: left;
                            box-sizing: border-box;
                            text-align: center;
                            color: #fff;
                            height: 30px;
                            line-height: 30px;
                            width: 20px;
                            margin-right: 2px;
                            background: url("../../../static/bg.png") no-repeat center;
                            background-size: cover;
                        }
                    }
                    td:last-child {
                        cursor: pointer;
                        color: #1B4B98;
                    }

                }

            }

        }
        .left {
            position: absolute;
            top: -5px;
            left: 0px;
        }
        .left-down {
            position: absolute;
            bottom: -2px;
            left: 0px;
        }
        .right-down {
            position: absolute;
            bottom: -2px;
            right: 0px;
        }
        .right {
            position: absolute;
            top: -2px;
            right: 0px;
        }
        .dom {
            td {
                background: #0A0919 !important;
            }
        }
    }
</style>
